<template>
  <div class="article">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="博文标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="博文类别" prop="category">
        <el-select v-model="form.category_id" placeholder="请选择文章类别">
          <el-option
            v-for="category in categories"
            :key="category.category_id"
            :label="category.category_alias"
            :value="category.category_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="博文作者" prop="author">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="文章摘要" prop="abstract">
        <el-input type="textarea" v-model="form.abstract"></el-input>
      </el-form-item>
      <el-form-item label="上传封面图片" prop="img" style="height: 160px">
        <div class="img">
          <el-upload
            ref="upload"
            action="#"
            name="picture"
            :auto-upload="false"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            list-type="picture-card"
            :class="{ disabled: uploadDisabled }"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" closeOnClickModel>
            <img width="100%" :src="form.dialogImageUrl" alt />
          </el-dialog>
        </div>
      </el-form-item>
      <el-form-item label="博文内容" prop="content"
        ><wang-editor
          @submitContent="handleContent"
          :content="form.content"
        ></wang-editor
      ></el-form-item>
    </el-form>
  </div>
</template>
<script>
import WangEditor from '../components/wangEditor.vue'
export default {
  name: 'ArticleModify',
  components: { WangEditor },
  data() {
    return {
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { max: 30, message: '长度在 30 个字符以内', trigger: 'blur' },
        ],
        img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        category: [
          { required: true, message: '请选择文章分类', trigger: 'blur' },
        ],
        abstract: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者名', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ],
      },
      uploadDisabled: false,
      dialogVisible: false,
      categories: [],
      value: '',
      pictureUrl: this.$route.query.pictureUrl, //存放图片URL
      fileList: [],
      // form: {
      //   id: this.$route.query.article.id,
      //   title: this.$route.query.article.title,
      //   category_id: this.$route.query.article.category_id,
      //   abstract: this.$route.query.article.abstract,
      //   author: this.$route.query.article.author,
      //   content: this.$route.query.article.content,
      // },
      form: '',
    }
  },
  created() {
    this.getCategories()
    //接收文章列表组件传来的值
    this.form = this.$route.query.article
    //将图片utl放入fileList
    let obj = new Object()
    obj.url = this.pictureUrl
    this.fileList.push(obj)
  },
  methods: {
    //获取类信息数组
    async getCategories() {
      const {
        result: { categories },
      } = await this.$http.get('/API/V1/categories')
      this.categories = categories
    },
    //接收子组件传的值 发送请求更新数据库
    handleContent(html) {
      this.form.content = html
      //获取类的id
      console.log(this.form)
      this.$http
        .put('/API/V1/admin/articles/' + this.form.id, {
          content: this.form.content,
          title: this.form.title,
          author: this.form.author,
          abstract: this.form.abstract,
          category_id: this.form.category_id,
        })
        .then((data) => {
          const { code } = data
          if (code == 0) {
            this.$message.success('修改博文成功')
          }
          //模拟表单, 将图片以二进制流的形式上传服务器
          const formdata = new FormData()
          formdata.append('picture', this.$refs.upload.uploadFiles[0].raw)
          //formdata.append('test', 'test')
          this.$http
            .post(
              `/API/V1/admin/articles/${this.form.id}/images?filename=cover.jpg`,
              formdata,
              {
                headers: { 'Content-type': 'multipart/form-data' },
              }
            )
            .then((res) => {
              console.log(res)
            })
        })
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file)
      this.uploadDisabled = false
    },
    //上传中
    handlePictureCardPreview(file) {
      console.log(file)
      this.form.dialogImageUrl = file.url
      this.dialogVisible = true
      this.uploadDisabled = true
    },
    //上传成功
    handleUploadSuccess(file, fileList) {
      console.log(fileList)
      this.form.dialogImageUrl = fileList.url
      console.log(this.form.dialogImageUrl)
      this.uploadDisabled = true
    },
  },
}
</script>

<style>
.article {
  width: 800px;
  margin: 40px;
}
.el-form .el-form-item:last-child {
  background-color: rgba(0, 0, 0, 0);
}
</style>
